<template>
  <div class="table-container">
    <div class="table-container_title">
      <slot name="title">
        <h1>{{ title }}</h1>
      </slot>
    </div>
    <div class="table-container_main">
      <div
        v-if="$slots.search"
        ref="mainSearch"
        class="main_search">
        <slot
          name="search"
          :search-box-width="searchBoxWidth" />
      </div>
      <div class="main_content">
        <div
          v-if="$slots.toolbar"
          class="table_toolbar">
          <slot
            name="toolbar" />
        </div>
        <div
          ref="tableContent"
          class="table_content">
          <slot :content-height="tableContentHeight" />
        </div>
        <div
          v-if="$slots.footer"
          class="table_footer">
          <slot name="footer" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useElementSize } from '@vueuse/core'

defineProps({
  // 页面标题
  title: String,
})

// toolbar 宽度 用于popover
const { width: searchBoxWidth } = useElementSize(useTemplateRef('mainSearch'))
// 表格内容高度
const { height: tableContentHeight } = useElementSize(useTemplateRef('tableContent'))
</script>

<style lang="scss" scoped>
.table-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;

  .table-container_title {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid rgb(0 0 0 / 6%);
    line-height: 58px;

    & > h1 {
      color: rgb(0 0 0 / 88%);
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
    }
  }

  .table-container_main {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    padding: 0 18px;

    .main_search {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      height: 80px;
      border-bottom: 1px solid rgb(0 0 0 / 6%);
    }

    .main_content {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;

      .table_toolbar {
        display: flex;
        flex: 0 0 80px;
        justify-content: space-between;
        align-items: center;
      }

      .table_content {
        flex: 1;
      }

      .table_footer {
        display: flex;
        flex: 0 0 62px;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
